import { useRef } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.scss";
import { captchaLogin, getCaptcha } from "@/api/login/index";
import { Toast } from "react-vant";

const Login = () => {
  const navigate = useNavigate();
  const phoneRef = useRef<HTMLInputElement | null>();
  const captchaRef = useRef<HTMLInputElement | null>();
  const handleGetCaptcha = () => {
    if (phoneRef.current?.value) {
      console.log(phoneRef.current.value);
      getCaptcha(Number(phoneRef.current.value)).then((result) => {
        console.log(result);
      });
    }
  };
  const handleLogin = () => {
    if (phoneRef.current?.value && captchaRef.current?.value) {
      captchaLogin({
        phone: phoneRef.current.value,
        captcha: captchaRef.current.value,
      }).then((result) => {
        if (result.data.cookie) {
          localStorage.setItem("COOKIE", result.data.cookie);
          Toast.loading({
            message: "登录成功",
            duration: 1000,
          });
          setTimeout(() => {
            navigate("/discovery");
          }, 1000);
        }
      });
    }
  };
  return (
    <div className={styles.login}>
      <div className={styles.headerTitle}>立即体验</div>
      <div className={styles.logoWrap}>
        <svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
        >
          <path d="M512 32c265.12 0 480 214.88 480 480 0 265.088-214.88 480-480 480-265.088 0-480-214.912-480-480C32 246.848 246.912 32 512 32z m82.08 173.568c-51.84 17.152-76.736 65.44-61.856 120.32l5.344 20.192c-11.2 2.432-22.208 5.696-32.928 9.824-50.656 19.52-90.848 62.816-104.896 113.024a153.696 153.696 0 0 0-5.088 55.04 137.92 137.92 0 0 0 57.536 100.576 121.504 121.504 0 0 0 103.264 17.6 120.96 120.96 0 0 0 63.68-42.56c24.736-32.288 32.096-74.752 20.8-119.52-4.16-16.32-9.344-34.368-14.4-51.904l-5.376-18.976c21.44 5.376 41.184 16.032 57.44 31.04 56 52.288 66.784 142.368 25.088 209.536-36.608 59.008-107.936 97.088-181.664 97.088a225.76 225.76 0 0 1-225.536-225.472c0-28.992 5.696-57.696 16.832-84.448a221.664 221.664 0 0 1 41.856-65.6 223.712 223.712 0 0 1 81.408-56.416A31.712 31.712 0 0 0 412.064 256a299.52 299.52 0 0 0-25.696 11.808 289.504 289.504 0 0 0-100 86.432 286.56 286.56 0 0 0-54.304 167.136c0 159.296 129.6 288.896 288.96 288.896 95.2 0 187.648-49.856 235.552-127.072 58.304-93.888 43.232-215.584-35.712-289.344-32.32-30.208-74.368-47.872-118.784-51.776-2.304-8.96-5.888-22.592-8.64-32.832-2.08-7.584-3.104-16.16-0.864-23.808a31.808 31.808 0 0 1 38.4-21.44c4.416 1.184 8.608 3.264 12.256 6.048 3.84 2.88 6.848 6.624 10.368 9.888a31.744 31.744 0 0 0 49.856-37.664l-0.64-1.056a65.312 65.312 0 0 0-14.4-16.448 100.48 100.48 0 0 0-53.376-23.392 96.128 96.128 0 0 0-40.96 4.224z m-40.224 201.92c3.36 12.416 7.04 25.344 10.752 38.176 4.928 17.28 9.888 34.432 13.824 49.92 4.576 18.176 6.624 44.192-9.664 65.472a57.056 57.056 0 0 1-30.24 19.936 58.464 58.464 0 0 1-50.144-8.544 73.92 73.92 0 0 1-30.528-53.952 89.6 89.6 0 0 1 2.944-32.416c8.8-31.36 34.304-58.528 66.624-71.008 8.672-3.36 17.536-5.856 26.432-7.584z"></path>
        </svg>
      </div>
      <div className={styles.iphoneWrap}>
        <input
          ref={(ref) => (phoneRef.current = ref)}
          type="text"
          placeholder="请输入手机号"
        />
      </div>
      <div className={styles.captchWrap}>
        <div className={styles.inputWrap}>
          <input
            ref={(ref) => (captchaRef.current = ref)}
            type="text"
            placeholder="请输入短信验证码"
          />
        </div>
        <div className={styles.textWrap} onClick={() => handleGetCaptcha()}>
          获取验证码
        </div>
      </div>
      <div className={styles.loginWrap} onClick={() => handleLogin()}>
        <div>登录</div>
      </div>
    </div>
  );
};

export default Login;
